<template>
  <div style="height: 100%" ref="appearRateRef"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TitleComponentOption,
  ToolboxComponent,
  ToolboxComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption,
} from 'echarts/components';
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);
type appearRateChartOption = echarts.ComposeOption<
  | TitleComponentOption
  | ToolboxComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | LineSeriesOption
>;

let appearRateChartInstance: any = null;
const dispose = [null, '', undefined];

// 英雄登场率---折线图
const appearRateRef = ref<HTMLElement | null>(null);
const initAppearRate = () => {
  if (appearRateRef.value === null) return;
  if (!dispose.some((k: null | string | undefined) => k === appearRateChartInstance)) appearRateChartInstance.dispose();
  appearRateChartInstance = echarts.init(appearRateRef.value);
  const option: appearRateChartOption = {
    title: {
      text: '英雄登场率',
    },
    tooltip: {
      trigger: 'axis',
      formatter: `
            版本: <span style="font-weight: bold; margin-left: 5px">v{b0}</span><br />
            <span style="width: 10px; height:10px;border-radius: 50%; background-color: #54FF9F; margin-right: 5px; display: inline-block"></span>{a0}: <span style="font-weight: bold; margin-left: 20px">{c0} %</span><br />
            <span style="width: 10px; height:10px;border-radius: 50%; background-color: #F56C6C; margin-right: 5px; display: inline-block"></span>{a1}: <span style="font-weight: bold; margin-left: 20px">{c1} %</span><br />
            <span style="width: 10px; height:10px;border-radius: 50%; background-color: #87CEFA; margin-right: 5px; display: inline-block"></span>{a2}: <span style="font-weight: bold; margin-left: 20px">{c2} %</span><br />
            <span style="width: 10px; height:10px;border-radius: 50%; background-color: #8470FF; margin-right: 5px; display: inline-block"></span>{a3}: <span style="font-weight: bold; margin-left: 34px">{c3} %</span><br />`,
    },
    legend: {
      data: ['破败之王', '法外狂徒', '圣枪游侠', '塞拉斯'],
      right: 0,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '5%',
      containLabel: true,
    },
    xAxis: [
      {
        name: '单位:版本',
        nameLocation: 'middle',
        nameGap: 26,
        boundaryGap: false,
        data: ['11.20', '11.21', '11.22', '11.23', '11.24', '12.1', '12.2', '12.5', '12.6', '12.7', '12.8', '12.9'],
      },
    ],
    yAxis: [
      {
        name: '单位: %',
        type: 'value',
        splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
      },
    ],
    series: [
      {
        name: '破败之王',
        type: 'line',
        symbolSize: 5,
        symbol: 'circle',
        smooth: true,
        // 线颜色
        lineStyle: { color: '#54FF9F' },
        // 点的填充色和点的边框颜色
        itemStyle: { color: '#54FF9F', borderColor: '#54FF9F' },
        areaStyle: {
          // 颜色渐变函数 前四个参数分别表示四个位置依次为 右 下 左 上 四个方位
          // 0 0 0 1 则代表渐变色从正上方开始，从上到下渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // offset的范围是0 ~ 1，用于表示位置; 由0 ~ 1逐渐渐变，1为白色
            { offset: 0, color: '#54FF9Fb3' },
            { offset: 1, color: '#54FF9F03' },
          ]),
        },
        data: ['4.49', '7.96', '9.59', '8.93', '10.83', '12.51', '12.02', '11.12', '11.05', '11.61', '12.51', '16.8'],
      },
      {
        name: '法外狂徒',
        type: 'line',
        symbolSize: 5,
        symbol: 'circle',
        smooth: true,
        lineStyle: { color: '#F56C6C' },
        itemStyle: { color: '#F56C6C', borderColor: '#F56C6C' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#F56C6Cb3' },
            { offset: 1, color: '#F56C6C03' },
          ]),
        },
        data: ['28.55', '17.96', '17.34', '15.5', '17.53', '18.15', '14.94', '15.59', '11.7', '6.78', '7.27', '7.84'],
      },
      {
        name: '圣枪游侠',
        type: 'line',
        symbolSize: 5,
        symbol: 'circle',
        smooth: true,
        lineStyle: { color: '#87CEFA' },
        itemStyle: { color: '#87CEFA', borderColor: '#87CEFA' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#87CEFAb3' },
            { offset: 1, color: '#87CEFA03' },
          ]),
        },
        data: ['14.98', '10.59', '27.97', '25.67', '18.54', '12.62', '10.33', '9.31', '10.78', '15.18', '19.23', '22.02'],
      },
      {
        name: '塞拉斯',
        type: 'line',
        symbolSize: 5,
        symbol: 'circle',
        smooth: true,
        lineStyle: { color: '#8470FF' },
        itemStyle: { color: '#8470FF', borderColor: '#8470FF' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#8470FFb3' },
            { offset: 1, color: '#8470FF03' },
          ]),
        },
        data: ['10.55', '9.39', '6.95', '13.71', '14.37', '15.45', '17.92', '17.81', '15.98', '15.18', '12.69', '10.55'],
      },
    ],
  };
  option && appearRateChartInstance.setOption(option);
};

// echarts resize
const initEchartsResize = () => {
  nextTick(() => {
    // 不做防抖，视图实时改变
    appearRateChartInstance.resize();
  });
};

// 监听 echarts resize
const listenEchartsResize = () => {
  window.addEventListener('resize', initEchartsResize);
};

onMounted(() => {
  initAppearRate();
  listenEchartsResize();
});

onUnmounted(() => {
  window.removeEventListener('resize', initEchartsResize);
});
</script>

<style scoped lang="scss"></style>
